<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="<?= BASE_URL?>imports/images/favicon.ico" rel="icon" type="image/x-icon" />
        <?= $css ?>
        <?= $js_variables ?>
        <?= $js ?>
        <?= (isset($js_opt)) ? $js_opt : '' ?>
    </head>
    <body>

        <div class="main-container">
            <div class="login-wrapper">
                <script>
                    $(function() {
                        $( "#tabs" ).tabs();
                    });
                </script>

                <div class="demo">

                    <div id="tabs">
                        <ul>
                            <li><a href="#tabs-1">Log-in</a></li>
                            <li><a href="#tabs-2">Sign-up</a></li>
                        </ul>
                        <div id="tabs-1">
                            <?= frm('auth/login', array('method' => 'post', 'class' => 'login')) ?>
                            <table class="log-in-frm">
                                <tr>
                                    <td colspan="2" class="alert-1"  style="text-align: right">
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>Username:</td>
                                    <td class="form-input">
                                        <?= generate_input_element('username', array('class' => 'required email')) ?>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Password:</td>
                                    <td class="form-input">
                                        <?= generate_input_element('password', array('type' => 'password', 'class' => 'required')) ?>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="right" >
                                        <input type="submit" value="Login"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="border-top:solid grey 1px;text-align: right">
                                        &nbsp;
                                        <?= img('preloader-2.gif',array('class'=>'preloader-2'))?>
                                    </td>
                                </tr>
                            </table>
                            </form>    
                        </div>
                        <div id="tabs-2">
                            <?= frm('auth/signup', array('method' => 'post', 'class' => 'signup')) ?>
                            <?php
                            $form_attributes = $GLOBALS['table']['users'];
                            collect_inputs($form_attributes);
                            //p($form_attributes);
                            ?>

                            <table class="log-in-frm">
                                <tr>
                                    <td colspan="2" class="alert-2"  style="text-align: right">
                                        &nbsp;
                                    </td>
                                </tr>
                                <?php foreach ($form_attributes as $i => $v): ?>
                                    <tr>
                                        <td class="form-label"><label><?= $v['label'] ?></label></td>
                                        <td class="form-input" cin="<?= $i ?>"><?= $v['input'] ?></td>
                                    </tr>
                                <?php endforeach; ?>
                                
                                
                                <tr>
                                    <td>Captcha Code</td>
                                    <td>
                                        <image src="<?= BASE_URL.'auth/captcha'?>" class="captcha"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td class="form-input">
                                        <?= generate_input_element('captcha',array('class'=>'required'))?>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="right">
                                        <?= generate_input_element('save', array('type' => 'submit', 'value' => 'Sign-up')) ?>
                                    </td>
                                </tr>    
                                <tr>
                                    <td colspan="2" style="border-top:solid grey 1px;text-align: right">
                                        &nbsp;
                                        <?= img('preloader-2.gif',array('class'=>'preloader-2'))?>
                                    </td>
                                </tr>

                            </table>
                            <?= form_close() ?>

                        </div>
                    </div>
                </div>
            </div>
            <script>
                $(function(){
                    var ctr = 1;
                    var o ={
                        a_submit:function(param){
                            $(param.index).ajaxForm({
                                'dataType':'json',
                                'beforeSubmit':function(){
                                    o.preloader({index:'.preloader-2'});
                                },
                                'success':function(d){
                                    
                                    o.alert({
                                        index:param.toggle,
                                        type:"ajax-"+d.success,
                                        msg:d.msg
                                        
                                    });
                                                
                                    o.preloader({index:'.preloader-2',hide:true});
                                    if(d.redirect){
                                        setTimeout('redirect("'+d.redirect+'")',1000);
                                    }
                                    
                                    if(d.refresh_captcha){
                                        $(".captcha").hide().attr('src', BASE_URL+'auth/captcha/'+(ctr++)).load(function(){$(this).show();});
                                    }
                                }
                            });
                        },
                        preloader:function(param){
                            if(param.hide){
                                $(param.index).hide(500);
                            }else{
                                $(param.index).show(100);
                            }
                        },
                        alert:function(par){
                            
                            $(par.index).html('<span class="'+par.type+'">'+par.msg+'</span>');
                        }
                    };
                
                    $(".signup").validate();
                    $(".login").validate();
                
                    var login = {
                        index:".login",
                        toggle:'.alert-1'
                    
                    }
                    var signup = {
                        index:".signup",
                        toggle:".alert-2"
                    }
                
                    o.a_submit(login);
                    o.a_submit(signup);
                
                
                });
                
                function redirect(url){
                    window.location = url;
                }
                
            </script>    
    </body>
</html>